<template>
  <div>
    <div class="first-bar">
      <div style="max-width: 1600px;margin: auto;">
        <el-menu mode="horizontal">
          <el-menu-item style="width: 18%;"/>
          <el-menu-item index="1">
            <el-image :src="global.recommendImg+'/static/img/icon.jpg'" style="height: 50px;width: 100px" />
          </el-menu-item>
          <el-menu-item v-if="divState === 'video'" style="width:12%" index="2">
            <div style="width: 5%;font-size: 150%;color: black">| 视频</div>
          </el-menu-item>
          <el-menu-item v-if="divState === 'content'" style="width:12%" index="2">
            <div style="width: 5%;font-size: 150%;color: black">| 内容</div>
          </el-menu-item>
          <el-menu-item style="width: 26%"/>
          <el-menu-item index="3" v-if="users === '未登录'">
              <el-button type="primary" plain @click="goLogin()">前往登录</el-button>
          </el-menu-item>
          <el-submenu index="3" v-if="users !== '未登录'">
            <template slot="title">
              <div style="display:inline-block">
                <el-avatar :size="25" :src="users.usersPortrait"/>
              </div>
              <div style="display:inline-block">
                {{ users.usersName }}
              </div>
            </template>
            <el-menu-item index="3-1" @click="goUsersMessage()">查看信息</el-menu-item>
            <el-menu-item index="3-2" @click="goUsersUpdate()">修改信息</el-menu-item>
            <el-menu-item index="3-3" @click="logOut()">退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "contentNavigation",
  data: function (){
    return{
      divState:"选项",
      users:{},
    }
  },
  methods:{
    goLogin(){
      this.$router.push("/login");
    },
    goUsersUpdate(){
      this.$router.push("/userUpdate")
    },
    goUsersMessage(){
      this.$router.push("/userHome/"+this.users.usersId)
    },
    logOut(){
      localStorage.removeItem("userData");
      this.$router.push("/login");
    },
  },
  created() {
    this.divState=this.$route.params.divState
    if (this.divState === undefined){
      this.divState="选项"
    }
    this.users=JSON.parse(localStorage.getItem("userData")) === null ? '未登录' : JSON.parse(localStorage.getItem("userData"))
  },
}
</script>

<style scoped>
.first-bar{
  z-index: 100;
  position: fixed;
  top:0px;
  width: 100%;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

a{
  text-decoration:none;
  size: 100px;
  margin-right: 3%;
}
</style>